<template>
    <div class="BaseFooter">
        <div class="module-container">
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/home'}" class="color0" :class="{'color1':currentRoute==='home'}"><div class="img0 img1" :class="{'active-img1':currentRoute==='home'}"></div>应急首页</router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/complexTraffic'}" class="color0" :class="{'color1':currentRoute==='complexTraffic'}"><div class="img0 img2" :class="{'active-img2':currentRoute==='complexTraffic'}"></div>风险隐患</router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/city'}" class="color0" :class="{'color1':currentRoute==='city'}"><div class="img0 img3" :class="{'active-img3':currentRoute==='city'}"></div>监测预警</router-link>
            </div>
            <div class="module-item" >
                <router-link :to="{path:'/portal-web/traffic'}" class="color0" :class="{'color1':currentRoute==='traffic'}"><div class="img0 img4" :class="{'active-img4':currentRoute==='traffic'}"></div>日常值守</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BaseFooter",
        data(){
          return{
              currentRoute:'home'
          }
        },
        watch:{
            '$route':{
                handler(to){
                    this.currentRoute = to.name
                },
                deep:true,
                immediate:true
            }
        }
    }
</script>

<style scoped lang="less">
    .BaseFooter{
        width: 11.050rem;
        height: .178rem;
        background: url('../../assets/images/foot@2x.png') no-repeat center;
        background-size: auto;
        position: absolute;
        bottom: 0;
        font-size: @fontSize_h1;

        .module-container{
            width: 2rem;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            margin: 0 auto;
            .module-item{
                width: .5rem;
                height:100%;
                position: relative;
                text-align: center;
            }
            .img0{
                width: .1rem;
                height: .1rem;
                position: absolute;
                top: 50%;
                left: 15%;
                transform: translate(-50%,-50%);
                display: inline-block;
                vertical-align: middle;
            }
            .color0{
                width: .4rem;
                height:100%;
                color: #54d5ff;
                font-size: .048rem;
                line-height: .178rem;
                display: block;
            }
            .color1{
                color: #0dfbe7;
            }
            .img1{
                background: url('../../assets/images/foot/1.png') no-repeat center;
            }
            .active-img1{
                background: url('../../assets/images/foot/1-1.png') no-repeat center;

            }
            .img2{
                background: url('../../assets/images/foot/2.png') no-repeat center;
            }
            .active-img2{
                background: url('../../assets/images/foot/2-1.png') no-repeat center;

            }
            .img3{
                background: url('../../assets/images/foot/3.png') no-repeat center;
            }
            .active-img3{
                background: url('../../assets/images/foot/3-1.png') no-repeat center;

            }
            .img4{
                background: url('../../assets/images/foot/4.png') no-repeat center;
            }
            .active-img4{
                background: url('../../assets/images/foot/4-1.png') no-repeat center;

            }
            .img5{
                background: url('../../assets/images/foot/5.png') no-repeat center;
            }
            .active-img5{
                background: url('../../assets/images/foot/5-1.png') no-repeat center;

            }
        }
    }
</style>